<template>
  <div class="p20">
    <div class="e-age">
      <echarts
        :chartStyle="{
          height: '33vh',
        }"
        :option="option"
      ></echarts>
    </div>
  </div>
</template>
<script>
import { Echarts } from "../components";
import * as echarts from "echarts";

export default {
  components: {
    Echarts,
  },
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    this.initOption();
  },
  methods: {
    initOption() {
      this.option = {
        //图表离容器的距离
        legend: {
          top: "8%",
          right: "7%",
          itemWidth: 10,
          itemHeight: 3,

          textStyle: {
            color: "#FAF8F7",
          },
          data: ["占比"],
        },
        grid: {
          left: "12%",
          top: "20%",
          right: "5%",
          bottom: "10%",
        },
        //X轴
        xAxis: {
          data: ["20-30岁", "30-40岁", "40-50岁", "60岁以上"],
          axisLabel: {
            textStyle: {
              color: "#FAF8F7",
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false, //隐藏X轴刻度尺
          },
        },
        //y轴
        yAxis: {
          name: "人数",
          nameTextStyle: {
            color: "#FAF8F7",
            fontSize: 14, // 文本字号
            padding: [0, 0, 0, -30], // 设置标题与Y轴的距离，可根据需要调整
            align: "left", // 对齐方式
          },
          axisLabel: {
            textStyle: {
              color: "#FAF8F7",
              fontSize: 12,
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "占比",
            data: [100, 130, 300, 350, 200, 220, 80],
            type: "bar",
            barWidth: 15,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0173F4" }, // 渐变起始色
                { offset: 1, color: "#062B5A" }, // 渐变结束色
              ]),
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.e-age {
  background-size: 100% 100%;
  background-image: url("@/assets/screen/c3.png");
}

.p20 {
  padding: 0 0.2rem;
}
</style>
